<template>
    <div class="outline">
        <h3></h3>
        <div :style="{ height: px2vw(160) }">
            <div class="chart-container" :style="{ height: px2vw(200) }">
                <div class="chart" ref="chartRef1"></div>
                <div class="chart" ref="chartRef2"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import dayjs from "dayjs";
import * as echarts from "echarts";
import { DATE_TIME_FORMAT } from "@/const";
import { congestionComparison } from "@/services/dashborad";
import { fitChartSize, px2vw } from "@/utils/responsible";

const pointer = {
    icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
    length: "70%",
    width: fitChartSize(20),
    offsetCenter: [0, 0],
    itemStyle: {
        color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: "#ccc",
                },
                {
                    offset: 1,
                    color: "#fff",
                },
            ],
        },
    },
};

const getCencterCircle = (colors: [innerColor: string, outerColor: string]) => {
    const [innerColor, outerColor] = colors;
    const innerRadius = `${fitChartSize(8)}%`;
    const radius = [innerRadius, `${fitChartSize(11)}%`];
    const top = "-20%";
    return [
        {
            name: "circleOuter",
            type: "pie",
            animation: false,
            top,
            hoverAnimation: false,
            legendHoverLink: false,
            radius,
            tooltip: { show: false },
            z: 10,
            label: {
                normal: {
                    show: false,
                    position: "center",
                },
                emphasis: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: 100,
                    name: "value",
                    itemStyle: { normal: { color: outerColor } },
                },
            ],
        },
        {
            name: "circleInner",
            type: "pie",
            animation: false,
            top,
            hoverAnimation: false,
            legendHoverLink: false,
            radius: innerRadius,
            tooltip: { show: false },
            z: 10,
            label: {
                normal: { show: false, position: "center" },
                emphasis: { show: false },
            },
            labelLine: { normal: { show: false } },
            data: [
                {
                    value: 100,
                    name: "value",
                    itemStyle: { normal: { color: innerColor } },
                },
            ],
        },
    ];
};

const chartRef1 = ref(null);
const chartRef2 = ref(null);

onMounted(async () => {
    const result = await congestionComparison({
        currentTime: dayjs().format(DATE_TIME_FORMAT),
    });
    if (!result) return;
    const {
        currentSpeedIndex,
        speedIndexCompare,
        currentCongestionIndex,
        congestionIndexCompare,
    } = result as any;

    const congestionChart = echarts.init(chartRef1.value, "dark");
    const speedChart = echarts.init(chartRef2.value, "dark");

    if (currentCongestionIndex) {
        const common = {
            fontSize: fitChartSize(32),
            fontWeight: "bolder",
            fontFamily: "CustomFont",
        };
        congestionChart.setOption({
            backgroundColor: "transparent",
            series: [
                {
                    type: "gauge",
                    startAngle: 180,
                    endAngle: 0,
                    center: ["50%", "40%"],
                    radius: "80%",
                    min: 0,
                    max: 8,
                    splitNumber: 20,
                    axisLine: {
                        lineStyle: {
                            width: 14,
                            color: [
                                [
                                    0.25,
                                    {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#1BAE6E",
                                            },
                                            {
                                                offset: 1,
                                                color: "#F7B93C",
                                            },
                                        ],
                                    },
                                ],
                                [
                                    0.75,
                                    {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#F7B93C",
                                            },
                                            {
                                                offset: 1,
                                                color: "#F46E4A",
                                            },
                                        ],
                                    },
                                ],
                                [
                                    1,
                                    {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#F46E4A",
                                            },
                                            {
                                                offset: 1,
                                                color: "#BC0706",
                                            },
                                        ],
                                    },
                                ],
                            ],
                        },
                    },
                    pointer,
                    axisLabel: {
                        show: false,
                    },
                    title: {
                        offsetCenter: [0, "30%"],
                        fontSize: fitChartSize(16),
                        textStyle: { color: "#fff" },
                    },
                    detail: {
                        offsetCenter: [0, "70%"],
                        valueAnimation: true,
                        formatter: function (value: number) {
                            const getRichKey = (congestionIndex: number) => {
                                if (congestionIndex < 1.5) return "unimpeded";
                                if (
                                    congestionIndex >= 1.5 &&
                                    congestionIndex < 1.8
                                )
                                    return "slow";
                                if (
                                    congestionIndex >= 1.8 &&
                                    congestionIndex <= 2
                                )
                                    return "general";
                                if (congestionIndex > 2) return "severe";
                            };
                            const richKey = getRichKey(value);
                            if (!congestionIndexCompare) {
                                return `{${richKey}|${value}}`;
                            }
                            const syb = congestionIndexCompare > 0 ? "↑" : "↓";
                            return `{${richKey}|${value}} {rate|${syb}${
                                Math.round(congestionIndexCompare * 10) / 10
                            }}`;
                        },
                        rich: {
                            severe: {
                                ...common,
                                color: "#ff0404",
                            },
                            general: {
                                ...common,
                                color: "#ff606b",
                            },
                            slow: {
                                ...common,
                                color: "#ff7a3e",
                            },
                            unimpeded: {
                                ...common,
                                color: "#4bf99b",
                            },
                            rate: {
                                fontSize: fitChartSize(16),
                                color: "#F75A5A",
                            },
                        },
                    },
                    data: [
                        {
                            value: currentCongestionIndex,
                            name: "拥堵指数",
                        },
                    ],
                },
                ...getCencterCircle(["#00AEA7", "#17E789"]),
            ],
        });
    }

    if (currentSpeedIndex) {
        speedChart.setOption({
            backgroundColor: "transparent",
            series: [
                {
                    type: "gauge",
                    progress: {
                        show: true,
                        width: 14,
                    },
                    itemStyle: {
                        color: "rgba(46, 223, 241, 1)",
                        shadowColor: "rgba(0,138,255,0.45)",
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                    },
                    startAngle: 180,
                    endAngle: 0,
                    center: ["50%", "40%"],
                    radius: "80%",
                    min: 0,
                    max: 120,
                    splitNumber: 20,
                    pointer,
                    axisLabel: {
                        show: false,
                    },
                    title: {
                        offsetCenter: [0, "30%"],
                        fontSize: fitChartSize(16),
                        textStyle: { color: "#fff" },
                    },
                    detail: {
                        offsetCenter: [0, "70%"],
                        valueAnimation: true,
                        formatter: function (value: number) {
                            const fixedVal = Math.round(value);
                            if (!speedIndexCompare) {
                                return `{a|${fixedVal}}`;
                            }
                            const syb = speedIndexCompare > 0 ? "↑" : "↓";
                            const rateRichKey =
                                speedIndexCompare > 0 ? "increase" : "decrease";
                            return `{a|${fixedVal}} {${rateRichKey}|${syb}${
                                Math.round(speedIndexCompare * 10) / 10
                            }}`;
                        },
                        rich: {
                            a: {
                                fontSize: fitChartSize(32),
                                color: "#63FBF6",
                                fontWeight: "bolder",
                                fontFamily: "CustomFont",
                            },
                            increase: {
                                fontSize: fitChartSize(16),
                                color: "#0AF5B4",
                            },
                            decrease: {
                                fontSize: fitChartSize(16),
                                color: "#F75A5A",
                            },
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            width: 14,
                            color: [
                                [
                                    1,
                                    {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#2EDFF1",
                                            },
                                            {
                                                offset: 1,
                                                color: "#004B89",
                                            },
                                        ],
                                    },
                                ],
                            ],
                        },
                    },
                    data: [
                        {
                            value: currentSpeedIndex,
                            name: "平均速度",
                        },
                    ],
                },
                ...getCencterCircle(["#5EAFFF", "#3DE4E0"]),
            ],
        });
    }
});
</script>

<style lang="scss" scoped>
.outline {
    height: 218px;
    > h3 {
        height: 38px;
        margin-bottom: 20px;
        background-image: url(../../../assets/bg_title_outline.png);
        background-size: cover;
    }

    .chart-container {
        display: flex;
        .chart {
            // background: url(../../../assets/bg_chart_realtime.png) no-repeat;
            // background-size: cover;
            flex: 1;
            height: 100%;
        }
    }
}
</style>
